<template>
    <pre :class="strongStl" >{{bx ? "     "+props.txt.substring(4) : props.txt }}</pre>
</template>

<script setup>
    import {ref,reactive,onMounted,computed} from 'vue'

    const props = defineProps({
        txt:String,

    })

    const strongStl = reactive({
        'cmd-flag' : false ,
        'bl-flag' : false
    })
    let  bx = false
    onMounted(()=>{
        if(props.txt.match('Jke:')){
            strongStl['cmd-flag'] = true
        }
        if(props.txt.match("<<>>")){
            // props.txt = props.txt.substring(4)
            strongStl['bl-flag'] = true
            bx = true
        }
    })


</script>

<style scoped>
    .cmd-flag{
        color: #dddf23;
        font-size: 1.4em !important;
        font-weight: 500;
        border-bottom: 1px dashed #89fd87;
    }
    .bl-flag{
        /* padding-left: 7.5em; */
        /* text-decoration: underline ; */
         color: #dddf23;
         font-style: italic;
         text-align: left;
    }

    pre{
        color: azure;
    }
@media (prefers-color-scheme: light) {
    .cmd-flag{
        color: #f00;
        font-size: 1.4em !important;
        font-weight: 500;
        border-bottom: 1px dashed #0000fd;
    }
    pre{
        color: #232323;
    }

}
</style>
